<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #333;
        }
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // 游戏设置
        const gridSize = 20;
        const tileCount = canvas.width / gridSize;
        
        let snake = [
            {x: 10, y: 10}
        ];
        let direction = {x: 0, y: 0};
        let food = {
            x: Math.floor(Math.random() * tileCount),
            y: Math.floor(Math.random() * tileCount)
        };
        
        // 游戏主循环
        function gameLoop() {
            moveSnake();
            
            if (checkGameOver()) {
                alert('游戏结束！');
                resetGame();
                return;
            }
            
            checkFoodCollision();
            clearScreen();
            drawFood();
            drawSnake();
            
						//改变参数300可以改变蛇的移动速度；
            setTimeout(gameLoop, 300);
        }
        
        // 移动蛇
        function moveSnake() {
            const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
            snake.unshift(head);
            
            // 如果没有吃到食物，删除尾部
            if (head.x !== food.x || head.y !== food.y) {
                snake.pop();
            }
        }
        
        // 检查游戏是否结束
        function checkGameOver() {
            // 检查是否撞墙
            if (snake[0].x < 0 || snake[0].x >= tileCount || 
                snake[0].y < 0 || snake[0].y >= tileCount) {
                return true;
            }
            
            // 检查是否撞到自己
            for (let i = 1; i < snake.length; i++) {
                if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
                    return true;
                }
            }
            
            return false;
        }
        
        // 检查是否吃到食物
        function checkFoodCollision() {
            if (snake[0].x === food.x && snake[0].y === food.y) {
                food = {
                    x: Math.floor(Math.random() * tileCount),
                    y: Math.floor(Math.random() * tileCount)
                };
            }
        }
        
        // 清空屏幕
        function clearScreen() {
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
        
        // 绘制蛇
        function drawSnake() {
            ctx.fillStyle = 'lime';
            snake.forEach(segment => {
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, 
                           gridSize - 2, gridSize - 2);
            });
        }
        
        // 绘制食物
        function drawFood() {
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x * gridSize, food.y * gridSize, 
                        gridSize - 2, gridSize - 2);
        }
        
        // 重置游戏
        function resetGame() {
            snake = [{x: 10, y: 10}];
            direction = {x: 0, y: 0};
            food = {
                x: Math.floor(Math.random() * tileCount),
                y: Math.floor(Math.random() * tileCount)
            };
            gameLoop();
        }
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp':
                    if (direction.y === 0) {
                        direction = {x: 0, y: -1};
                    }
                    break;
                case 'ArrowDown':
                    if (direction.y === 0) {
                        direction = {x: 0, y: 1};
                    }
                    break;
                case 'ArrowLeft':
                    if (direction.x === 0) {
                        direction = {x: -1, y: 0};
                    }
                    break;
                case 'ArrowRight':
                    if (direction.x === 0) {
                        direction = {x: 1, y: 0};
                    }
                    break;
            }
        });
        
        // 开始游戏
        gameLoop();
    </script>
</body>
</html>